<script setup>
import { reactive, nextTick } from 'vue'
import { CopyOutlined, PlayCircleOutlined } from '@ant-design/icons-vue'
import request from "@/common/utils/request";

const state = reactive({
    visible: false,
    qrCodeSrc: '', // 二维码图片链接
})

const openDialog = (item) => {
    for (let key in item) {
        state[key] = item[key]
    }
    getQrcode(item.short_link)

    console.log(state, '打开弹窗');
    state.visible = true
}

// 获取二维码
const getQrcode = async (short_link) => {
    let qrcodeParams = {
        qrCode: short_link,
    };
    request.get("/public", "/qrcode", qrcodeParams).then((res) => {
        console.log(res, '二维码链接图片');
        state.qrCodeSrc = res.url;
    });
}
const close = () => {
    state.visible = false
}
defineExpose({
    openDialog,
    close,
})
</script>

<template>
    <a-modal v-model:visible="state.visible" :width='750' :footer="null">
        <template #title>
            <h2 class="title">分享抖音卡片链接</h2>
        </template>

        <div class="content">
            <div class="link_box">
                <div>
                    <span style="font-weight: bold;">抖音无风险链接：</span>{{ state.risk_free_link ||
                        '暂无链接' }}
                    <CopyOutlined class="Copy_icon" @click="$utils.copyText(state.risk_free_link)" />
                </div>
                <div style="margin-bottom: 10px;">
                    <span style="font-weight: bold;">通用链接：</span>{{ state.short_link ||
                        '暂无链接'
                    }}
                    <CopyOutlined class="Copy_icon" @click="$utils.copyText(state.short_link)" />
                </div>
            </div>
            <div class="content_msg">
                制作抖音卡片：目前在抖音 APP 仅支持苹果手机，安卓目前转不了卡片。请先用苹果手机转成卡片，再通过长按卡片分享转发给安卓手机，卡片之后可以通过长按分享转发的方式进行推广。
            </div>
            <div style="text-align:center;margin-bottom:-5px;">请使用<span
                    style="color: var(--ss-primary-color);">苹果手机</span>打开<span
                    style="color: var(--ss-primary-color);">抖音APP</span>进行扫码
            </div>
            <!-- 二维码部分 -->
            <div style="text-align: center; margin: 20px 0;">
                <img style="width: 200px; object-fit:cover;" :src="state.qrCodeSrc" alt="">
            </div>
            <div style="text-align: center;margin-top:-10px ">请务必使用
                <span style="color: var(--ss-primary-color); font-weight: 900;">抖音APP</span>
                进行扫码
            </div>
            <div style="text-align: center;margin-top:0px ">
                在<span style="color: var(--ss-primary-color); font-weight: 900;">首页</span>左上角中使用<span style="color: var(--ss-primary-color); font-weight: 900;">“扫一扫”</span>功能
            </div>
            <div style="text-align: center;">
                <p>制作成功后，可点击页面右上方的专访按钮分享至聊天，将卡片形式发送给好友</p>
            </div>
            <div style='display:flex;align-items:center;justify-content: space-around; margin-bottom: 10px;'>
                <!-- <a-button @click="lookcard" size='large' style='color:#1677FF;border:1px solid #1677FF'>
                    <PlayCircleOutlined style='color:#1677FF' />
                    查看卡片链接分享教程
                </a-button> -->
            </div>
        </div>

    </a-modal>
</template>



<style lang="less" scoped>
.content {
    .link_box {
        display: flex;
        flex-direction: column;
        gap: 15px;

        .Copy_icon {
            cursor: pointer;
            margin-left: 5px;

            &:hover {
                color: var(--ss-primary-color-hover);
            }
        }
    }

    .content_msg {
        border: 1px solid #FFDDA6;
        background: #fff2db;
        padding: 10px;
        text-align: left;
        margin-bottom: 25px;
    }
}

.title {
    color: #000000d9;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    margin: 0;
    word-wrap: break-word;
}
</style>